<template>
  <view>
    <u-popup :show="show" @close="cancel" :round="10" mode="center">
      <view class="popup-con">
        <view class="popup-title">
          <view class="applyfor-btn" style="padding-left: 25px" @click="cancel"> 取消 </view>
          <view class="applyfor-tit">
            {{ tit == '1' ? '商品属性' : '商品加料' }}
          </view>
          <view class="applyfor-btn" style="padding-right: 25px" @click="sure"> 确认 </view>
        </view>
        <scroll-view scroll-y="true" style="max-height: 400px">
          <view class="applyfor-info" v-if="checkboxList1.length > 0">
            <u-checkbox-group v-model="checkboxValue1" placement="column">
              <u-checkbox :customStyle="{ marginBottom: '8px' }" v-for="(item, index) in checkboxList1" :key="index"
                :label="item.name" :name="tit == '1'?item.definitionId:item.id">
              </u-checkbox>
            </u-checkbox-group>
          </view>
          <view class="empty" v-else style="text-align: center; padding: 50px 0"> 暂无数据 </view>
        </scroll-view>

      </view>
    </u-popup>
  </view>
</template>

<script setup>
  import {
    reactive,
    ref,
    computed,
    defineProps,
    defineEmits
  } from 'vue'
  const props = defineProps({
    showPopup: Boolean,
    titPopup: String,
    listPopup: Array,
    valuePopup: Array,
  })
  const emit = defineEmits(['cancelPopup', 'surePopup'])
  let show = ref(props.showPopup)
  let tit = ref(props.titPopup)
  let checkboxValue1 = ref(props.valuePopup)
  let checkboxList1 = ref(props.listPopup)
  const cancel = () => {
    emit('cancelPopup', false)
  }
  const sure = () => {
    show.value = false
    emit('surePopup', tit.value, checkboxValue1.value)
  }
</script>

<style scoped lang="scss">
  .popup-con {
    width: 328px;
    .popup-title {
      height: 50px;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #e7e7e7;

      .applyfor-btn {
        font-weight: 400;
        font-size: 16px;
        color: #0f90fd;
        box-sizing: border-box;
      }

      .applyfor-tit {
        font-weight: 500;
        font-size: 16px;
        color: #333333;
        flex: 1;
        text-align: center;
        flex-shrink: 0;
      }
    }

    .applyfor-info {
      padding: 17px 30px;
      box-sizing: border-box;
    }
  }
</style>
